<template>
    <div class="container">
        <div class="header block">
            <div class="enterprise-basic">
                <span class="title">派遣单位名称：{{ serveCompanyName }}</span>
                <span class="title project-name">项目名称：{{ projectName }}</span>
                <span class="file-state">（已归档）</span>
                <div class="createTime">
                    <span class="detail-key">创建时间：</span>
                    <span class="detail-value">{{ createTime }}</span>
                </div>
            </div>

        </div>
        <div class="block">
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入人员名称/身份证号"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
<!--                <button class="btn-green btn-alone" @click="onExport()">-->
<!--                    <i class="el-icon el-icon-upload2" />导出表格-->
<!--                </button>-->
                <export-button style="width: initial" @export="onExport()">导出表格</export-button>
            </div>
            <div class="table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-row-style="{ color: '#202536' }"
                    :row-style="{ color: '#5E617D' }"
                    @selection-change="handleSelectionChange"
                >
                    <!-- <el-table-column type="selection" /> -->
                    <el-table-column prop="workerName" label="员工姓名" >
                        <template #default="scope">
                            <div :class="[scope.row.nickName?.length ?? 0 + scope.row.workerName.length <= 10 ? 'align-items' : '']">
                                <div>
                                    {{ scope.row.workerName }}
                                </div>
                                <div v-if="scope.row.nickName">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="此处为备注名"
                                        placement="top-start"
                                    >
                                        <div class="nickName">
                                            {{ scope.row.nickName ? '('+ scope.row.nickName +')' : '' }}
                                        </div>
                                    </el-tooltip>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" />
                    <el-table-column prop="idCardNo" label="身份证号" />
                    <el-table-column prop="phone" label="手机号" />
                </el-table>
                <el-pagination
                    class="pagination"
                    v-model:currentPage="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
</script>
<script lang="ts">
import { defineComponent } from 'vue'
import { getPlaceProjectDetail } from '@/api/project'
import { ProjectDto } from '@/api/dto'
import { regressionFileExport } from '@/api/export'
import store from '@/store/index'
import axios from 'axios'
import { downLoadFile } from '../utils/util'
export default defineComponent({
    name: 'ProjectPlaceDetail',
    data () {
        return {
            tableData: [] as ProjectDto[],
            pageNum: 1,
            pageSize: 10,
            total: 0 as number | undefined,
            searchText: '',
            selects: [] as string[],
            serveCompanyName: '' as string | undefined,
            projectName: '' as string | undefined,
            createTime: '' as string | undefined
        }
    },
    created () {
        this.handleCurrentChange()
    },
    methods: {
        async handleCurrentChange () {
            const result = await getPlaceProjectDetail({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                projectId: Number(this.$route.params.id) as number,
                searchText: this.searchText
            })
            this.tableData = result.list
            this.total = result.totalCount
            this.serveCompanyName = result.serveCompanyName
            this.projectName = result.projectName
            this.createTime = result.createTime
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        async onExport () {
            const result = await regressionFileExport({
                ids: this.$route.params.id
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            console.log(result, 'result')
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //         '/common/download?delete=true&fileName=' +
            //         result

            // this.$message.success('导出成功！')
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.block
    padding 20px 24px 0
.header
    display flex
    justify-content space-between
    align-items flex-start
    padding-bottom 20px
.table
    margin-top 0
.title
    font-size font-small
    margin-bottom 24px
.detail-value
    margin-right 60px

.place-box
    display flex
    justify-content center
.place-row
    justify-content flex-start
    align-items baseline
    width 600px
    margin 20px auto
.place-box .text
    width 100px
.mini-btn
    margin 30px auto
    display block
:deep() .textarea textarea
    min-height 80px !important
.project-name
    margin-left 30px
.file-state
    color red
    font-size 16px
.createTime
    margin-top 20px
.btn-alone
    float right
.nickName
    color #FFC53D
</style>
